<template>
	<view class="safe-area-inset-bottom">
		<view class="header">
			<button size="mini" class="change_btn" @click="cancelSet">取 消</button>
			<button size="mini" class="change_btn" @click='submitForm'>确 定</button>
		</view>
		<uni-forms ref="ruleForm" :rules="rules" :modelValue="processForm" :label-width="70" label-align="right">
			
			<uni-card>
				<template slot="title">
					<view class="flex_between normarl-tit">
					  <view>绑定流程模板</view>
					  <span class="setting" @click="addProcess">添加签署流程</span>
					</view>  
				</template>
				<uni-forms-item label="流程模板" name="contractTypeId" style="margin-bottom: 0;">
					<uni-data-select v-model="processForm.id" :localdata="signProcessList" @change="handleContractSignProcessIdChange" placeholder="发起合同时自定义设置签约流程" />
				</uni-forms-item>
			</uni-card>	
			
			<uni-card>
				<template slot="title">
					<view class="flex_between normarl-tit">
					  <view>签约发起方</view>
					</view>  
				</template>
				<uni-forms-item label="发起人" style="margin-bottom: 0;">
					<custom-tree-select mutiple dataLabel="label" :disabled="true" :placeholder="$store.getters.companyInfo.name" :listData="deptOptions" v-model="defaultManage"/>
				</uni-forms-item> 
			</uni-card>	
			
			<uni-card>
				<template slot="title">
					<view class="flex_between normarl-tit">
					  <view>签约文件及签署要求</view>
					</view>  
				</template>
				<!-- 普通合同 -->
				<template v-if="processForm.contractSignFileType == 1">
				 <uni-forms-item label="合同文件" style="margin-bottom: 20rpx;">
					<uni-easyinput disabled v-model="placeholderText"></uni-easyinput>
				 </uni-forms-item>
				 <uni-forms-item label="签署要求" class="flex_item">
					<view style="margin-top: 14rpx;">
						<view>
						<view class="check_label">发起方：</view>
						<checkbox-group class="status_sign">
							<view>
							<label><checkbox checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
							</view>
							<label><checkbox :checked="processForm.isCompanySign == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
						</checkbox-group>
						</view> 
						<view style="margin-top:10rpx;">
							<view class="check_label">企业接收方：</view>
							<checkbox-group class="status_sign">
								<view>
								<label><checkbox checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
								</view>
								<label><checkbox :checked="processForm.isCompanySignReceive == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
							</checkbox-group>	
						</view>
						<view style="margin-top:10rpx;">
							<view class="check_label">个人接收方：</view>
							<checkbox-group class="status_sign">
								<view>
									<label><checkbox :checked="processForm.isPersonSign[0] == 1 || processForm.isPersonSign[1] == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />标准签字章</label>
								</view>
								<label><checkbox :checked="processForm.isPersonSign[1] == 0|| processForm.isPersonSign[0] == 0?true:false" color="#00a660" style="transform:scale(0.7)" disabled />手写签字章</label>
							</checkbox-group>	
						</view> 
					</view>
				 </uni-forms-item>
				</template>
				<!-- 标准合同 -->
				<template v-if="processForm.contractSignFileType == 0">
				 <uni-forms-item label="合同模板" name="name" style="margin-bottom: 20rpx;">
					 <view class="" v-for="(item,index) in contractTemplateList" :key="index">
						<uni-easyinput disabled v-model="item.name" placeholder="发起签约时，请使用标准合同模板，需系统内编辑完善" />
						<label class="radio" v-if="!!item.id && item.isUseSignSet==1 && contractTemplateList.length>1">
							<radio color="#00a660" :checked="item.isUseSignSet==1?true:false" disabled="true" style="transform:scale(0.6)"/>使用标准合同模板设置的签署要求
						</label>
					 </view>
				 </uni-forms-item>
				 <uni-forms-item label="签署要求" name="name" class="flex_item">
					<view style="margin-top: 14rpx;">
						<view>
						<view class="check_label">发起方：</view>
						<span v-if="processForm.signSet==null" class="text_span">使用标准合同模板设置的签署要求</span>
						<checkbox-group class="status_sign" v-else>
							<view>
							<label><checkbox checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
							</view>
							<label><checkbox :checked="processForm.signSet == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
						</checkbox-group>
						</view> 
						<view style="margin-top:10rpx;">
							<view class="check_label">企业接收方：</view>
							<span v-if="processForm.signSet==null" class="text_span">使用标准合同模板设置的签署要求</span>
							<checkbox-group class="status_sign" v-else>
								<view>
								<label><checkbox checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
								</view>
								<label><checkbox :checked="processForm.signSet == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
							</checkbox-group>	
						</view>
						<view style="margin-top:10rpx;">
							<view class="check_label">个人接收方：</view>
							<span v-if="!processForm.signPerson" class="text_span">使用标准合同模板设置的签署要求</span>
							<checkbox-group class="status_sign" v-else>
								<view>
									<label><checkbox :checked="processForm.signPerson[0] == 1 || processForm.signPerson[1] == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />标准签字章</label>
								</view>
								<label><checkbox :checked="processForm.signPerson[1] == 0|| processForm.isPersonSign[0] == 0?true:false" color="#00a660" style="transform:scale(0.7)" disabled />手写签字章</label>
							</checkbox-group>	
						</view> 
					</view>
				 </uni-forms-item>
				</template>
			</uni-card>
			
			<uni-card>
				<template slot="title">
					<view class="flex_between normarl-tit">
					  <view>签署人及签署方式</view>
					</view>  
				</template>
				<view v-for="(option,index) in selectSealData" :key="index">
					<!-- 分割线-->
					<view style="border-top:1rpx dashed #ccc;content:'';" v-if="!!selectSealData.length && selectSealData.length>1 && index != 0"></view>
					<uni-forms-item label="签署人">
						<uni-easyinput disabled v-model="option.label" placeholder="发起签约时选择签署人"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="盖章方式">
						<uni-data-select disabled v-model="option.ecSealCompanyId" :localdata="sealCompanyList" placeholder="仅盖印章"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="签字方式" style="margin-bottom: 0;">
						<uni-data-select disabled v-model="option.companySignType" :localdata="signTypeList" placeholder="无需盖签字章"></uni-data-select>
					</uni-forms-item>
				</view>
			</uni-card>
			
		</uni-forms>
	</view>
</template>

<script>
	import {
	  addContractBusinessType,
	  delContractBusinessType,
	  getContractBusinessType,
	  listDTOContractBusinessType,
	  updateContractBusinessType
	} from "@/api/ec/console/busiConfig/contractBusinessType";
	import {uniqueArr} from "@/utils";
	import {listNormalSealCompany} from "@/api/ec/console/seal/sealCompany";
	import {treeSelectAndStaff} from "@/api/ec/console/org/dept";
	import {getSignProcess, listSignProcess} from "@/api/ec/console/busiConfig/contractSignProcess";
    import {getTemplateByIds} from "@/api/ec/console/busiConfig/template";
	export default {
		data() {
			return {
				defaultManage:[],//默认发起人显示
				sealCompanyList:[], //盖章方式
				signTypeList:[{text:'标准签字章',value:1},{text:'手写签字章',value:2},{text:'无需签字章',value:-1}],
				// 添加的模板list
				contractTemplateList:[{
				  ids:Math.random(),
				  name:null,
				  id:null,
				}],      
				processForm:{
				        isCompanySeal:1,
				        isPersonSign:['1']
				},
				placeholderText:'发起签约时，请上传本地Word文件，需本地编辑完善', 
				deptOptions:[],
				signProcessList:[], //流程模板 
				selectSealData:[], //选中的签署人
				currentRow:{}, //当前操作的行
				selectStartData:[], //选中的发起方数组
				receiveForm:{
				        isCompanySeal:1,
				},
				rules:{
					
				},
			}
		},
		onLoad(option) {
			this.currentRow = option
			this.updateInitiation(option);
			this.initDept(); //部门员工数据
			this.initNormalSealCompany(); //查询企业印章列表
		},
		methods: {
			/** 查询企业印章列表 */
			initNormalSealCompany() {
			  listNormalSealCompany(this.queryParams).then(response => {
				  response.rows.forEach(item =>{
					  this.sealCompanyList.push({text:item.name,value:item.id})
				  })
			  });
			},    
			// 部门员工数据
			initDept(){
			  let data = {isCertify: 1, status: 1}
			  treeSelectAndStaff(data).then(response => {
			    this.deptOptions = response.data;
			  });
			},    
			// 删除流程绑定
			deleteProcess(data) {
			  // 清空签署人
			  this.selectSealData = [];
			  // 发起人
			  this.processForm.staffOrDeptId = [];
			  this.defaultManage = []
			  // 清空签署要求
			  this.processForm = {};
			  this.processForm.id = '';
			  // 签约文件及签署要求 重置
			  this.processForm={
			    id:'',
			    contractSignFileType:data.contractSignFileType,
			    isPersonSign:['1']
			  };
			  //签署人及签署方式 在线模板
			  if(data.contractSignFileType==0){
			    let userData={};
			    userData.label = this.$store.getters.staffInfo.adminName;
			    userData.companySignType =1;// 标准签字章
			    this.selectSealData.push(userData);
			  }
			  //签署人及签署方式 本地文件
			  if(data.contractSignFileType==1){
			    // 未绑定本地文件模板流程显示方式
			    let userData = {};
			    userData.label = this.$store.getters.staffInfo.adminName;
			    userData.companySignType = null;// 标准签字章
			    this.selectSealData.push(userData)
			  }
			},    
			// 签署流程修改事件
			handleContractSignProcessIdChange(e){
			  if(e == ''){
				this.deleteProcess(this.processForm)
			  }
			  if(!!this.processForm.id){
			    this.initSignProcess(this.processForm.id);
			  }
			  
			},    
			updateInitiation(data){
				this.reset(data.type);
				// type==0标准 1普通 
				if(data.type == 1){
					this.initSignProcessList(1);
					// 本地文件流程
					if(!!data.contractSignProcessFileId && data.contractSignProcessFileId != 0){
					  this.initSignProcess(data.contractSignProcessFileId);
					} else {
					  // 未绑定本地文件模板流程显示方式 
					  let userData = {};
					  userData.label = this.$store.getters.staffInfo.adminName;
					  userData.companySignType = null;// 标准签字章 
					  this.selectSealData.push(userData)
					}        
				}
				if(data.type == 0){
					this.initSignProcessList(0);
					// 在线模板流程
					if(!!data.contractSignProcessTemplateId && data.contractSignProcessTemplateId != 0){
					  this.initSignProcess(data.contractSignProcessTemplateId);
					} else {
					  // 未绑定在线模板流程显示方式
					  let userData={};
					  userData.label = this.$store.getters.staffInfo.adminName;
					  userData.companySignType =1;// 标准签字章
					  this.selectSealData.push(userData)
					}        
				}
			},
			// 签署流程 发起方 id查询人员设置 
			initSignProcess(contractSignProcessId) {
			  this.reset(this.currentRow.type);
			  getSignProcess(contractSignProcessId).then(response => {
			    this.processForm = response.data;
		
			    // 防止删除流程查不到流程问题
			    if (!!this.processForm.id) {
			      // 普通合同文件
			      if (this.currentRow.type == 1) {
			        // 签署要求 判断个人签名设置 
			        if (this.processForm.isPersonSign == '-1') {
			          this.processForm.isPersonSign = ["1"];
			        } else {
			          this.processForm.isPersonSign = this.processForm.isPersonSign.split(",");
			        }
			      }
			      // 标准合同文件 根据签署流程中 设置的签署要求模板id 查询模板签署要求 
			      if (this.currentRow.type == 0 && !!this.processForm.contractTemplateIds) {
			        getTemplateByIds(this.processForm.contractTemplateIds.split(",")).then(response => {
			          this.contractTemplateList = response.data;
			          this.contractTemplateList.forEach(data => {
			            if (data.id == this.processForm.contractTemplateSetId) {
			              data.isUseSignSet = 1;
			            }
			          });
			          // 查询设置的签署要求
			          let currentContractTemplate = this.contractTemplateList.find(contractTemplate => contractTemplate.id == this.processForm.contractTemplateSetId);
			          // 在线模板企业签署要求
			          this.processForm.signSet = currentContractTemplate.signSet;
			          // 接收方个人签署设置 默认为空则不限制
			          if (currentContractTemplate.signPerson == null) {
			            this.processForm.signPerson = ["0", "1"];
			          } else {
			            this.processForm.signPerson = currentContractTemplate.signPerson.split(",");
			          }
			        });
			      }
			      //  发起人 
			      this.processForm.contractSignProcessUseList.filter(userData => userData.isStarter == 1).forEach(userData => {
			        // 使用人id  使用人部门级别 使用人名称
			        this.selectStartData.push({
			          id: userData.staffOrDeptId,
			          level: userData.level,
			          label: userData.label,
			          isStarter: 1
			        })
			        this.processForm.staffOrDeptId.push(userData.staffOrDeptId);
					setTimeout(()=>{
						this.defaultManage = this.processForm.staffOrDeptId.toString()
					},100)
			      })
				  
				  // 发起人数组回显
				  if(this.processForm.staffOrDeptId.length > 0){
					  let arr = []
					  this.defaultManage = []
					  this.processForm.staffOrDeptId.forEach(item =>{
					  		arr.push(item)
							setTimeout(()=>{
							this.defaultManage = arr.toString()
							},100)
					  })
				  }
				  
			      // 签署人
			      this.processForm.contractSignProcessUseList.filter(userData => userData.isStarter == 0).forEach(userData => {
			        // 若是在线模板 并且未绑定在线模板签署流程 则重写签署人签字方式 为 标准签字章 
			        if (this.currentRow.type == 0 && this.processForm.contractTemplateSetId == 0) {
			          userData.companySignType = 1;
			        }
			        this.selectSealData.push(userData)
			      })
			    }
			  }).then(() => {
			  });
			},   
			// 表单重置
			reset(type) {
			  this.form = {
			    id: null,
			    name: null,
			    companyId: null,
			    contractTypeId: null,
			    sort: null,
			  };
			  this.processForm={
			    id: null,
			    contractSignFileType:type,
			    isPersonSign:['1']
			  };
			  this.contractTemplateList=[{
			    ids:Math.random(),
			    name:null,
			    id:null,
			  }];
			  this.receiveForm={},
			  this.selectSealData=[];
			  this.defaultManage = [];
			},     
			// 签署流程
			initSignProcessList(contractSignFileType){
			  // 状态启用的流程 
			  listSignProcess({status:1,contractSignFileType:contractSignFileType}).then(response => {
				response.rows.forEach(item => {
					this.signProcessList.push({text:item.name,value:item.id})
				})
			  });
			},    
			submitForm(){
			  let data = {};
			  data.id = this.currentRow.id;
			  if (this.currentRow.type == 0) {
			    // 在线模板签署流程
			    data.contractSignProcessTemplateId = this.processForm.id==''?0:this.processForm.id;
			  }
			  if (this.currentRow.type == 1) {
			    // 本地文件签署流程 
			    data.contractSignProcessFileId = this.processForm.id==''?0:this.processForm.id;
			  }
			  //保存修改的流程id 
			  updateContractBusinessType(data).then(response => {
			    this.$modal.msgSuccess("修改成功");
				uni.redirectTo({
					url:'./detail?id='+this.currentRow.id
				})
			  })      	
			},
			/** 添加签署流程 */
			addProcess(){
				uni.navigateTo({
					url:'/pages/mine/work/busiConfig/signingProcess/index'
				})
			},
			/** 取消 */
			cancelSet(){ 
				uni.navigateBack(1)
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-select__input-placeholder{
		font-size: 28rpx;
		color: #666;
	}
	.text_span{
		color: #000;
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-disabled:before{
		color: $uni-color-primary !important;
	}
	.status_sign{
		margin: 4rpx 0 10rpx;
		display: flex;
		view:first-child{
			width: 220rpx;
		}
	}
	.flex_item{
		display: flex;
		margin: 0 0 5rpx 0;
		.check_label{ 
			font-size: 26rpx;
			color: #666666;
		}
	}
	.uni-card{
		margin-bottom: 40rpx !important;
	}
	// 头部按钮显示 
	.header{
		background: #bde8bf;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		.change_btn{
			background: #fff;
			margin-right: 0;
			height:50rpx;
			line-height: 50rpx;
			color: $uni-color-primary;
			border:1rpx solid $uni-color-primary;
			font-size: 28rpx;
		}
	}
	page{
		background: $uni-bg-color;
	}
	::v-deep .uni-card .uni-card__content{
		padding: 20rpx 40rpx!important;
	}
	::v-deep .uni-card{
		padding: 0 !important;
	}
	.normarl-tit{
		line-height: 80rpx;
		padding:0 30rpx;
		font-size: 28rpx;
		background: #e6f6ef;
		border-top-right-radius: 8rpx;
		border-top-left-radius: 8rpx;
		color: $uni-color-primary;
		width: 100%;
		.setting{
			font-size: 26rpx;
		}
	}

</style>
